import React from "react";
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";
import * as echarts from "echarts";

import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
} from "../helps/echartsCommon";

export const getKxProjectPersonnelDistributionBarChartOption = ({
  dataSource = [],
}: KxProjectPersonnelDistributionBarChartProps): EChartsOption => {
  return {
    grid: {
      left: "12%",
      right: "6%",
      bottom: "5%",
      top: "10%",
    },
    tooltip: {
      show: true,
    },

    xAxis: {
      show: false,
      type: "value",
      nameTextStyle: {
        color: "#FDFFFF",
        fontSize: 14,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#FEFFFF",
          opacity: 0.1,
          width: 1,
        },
      },
      axisLabel: {
        show: false,
        fontSize: 16,
        fontFamily: "Arial",
        color: "#FDFFFF",
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          color: "#FDFFFF",
          fontSize: 14,

          overflow: "truncate",
          width: 70,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: dataSource.map((d) => d.name || ""),
      },
    ],
    series: [
      {
        name: "人",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          borderRadius: 30,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#824AFF",
            },
            {
              offset: 1,
              color: "#4A78FF",
            },
          ]),
        },
        barWidth: 10,
        data: dataSource.map((d) => d.amount || 0),
      },
    ],
  };
};

export interface KxProjectPersonnelDistributionBarChartProps
  extends CockpitChartBaseProps {
  img?: string;
}
export const KxProjectPersonnelDistributionBarChart = ({
  reactEChartsProps,
  dataSource = [],
  height = "316px",
}: KxProjectPersonnelDistributionBarChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      style={{
        height: height,
      }}
      option={getKxProjectPersonnelDistributionBarChartOption({
        dataSource,
      })}
      {...reactEChartsProps}
    />
  );
};
export default KxProjectPersonnelDistributionBarChart;
